<template>
	<view style="height: 2000rpx;background-color: #fff;">

		<view >
			<image src="../../static/zhou.png" style="width: 95%; height: 161px; margin: 10px; border-radius: 10px;"></image>
		</view>

		<view class="subname">
			<view style="font-weight: bold; margin-top: 20px; border-bottom: 1px solid #eee; padding-bottom: 20px;">
				填写入驻申请资料</view>
			<view class="uni-form-item uni-column" style="display: flex;border-bottom: 1px solid #eee;">
				<!-- <view style="flex: 1;line-height: 42px;">姓名</view> -->
				<input style="flex: 1;" class="uni-input" value="姓名" disabled="true" />
				<view style="flex: 5;text-align: left;">
					<input style="padding: 20px 10px 10px 0;color: gray" class="uni-input" v-model="realname"
						placeholder="输入真实姓名" />
				</view>
				
			</view>

			<view class="uni-form-item uni-column" style="display: flex;border-bottom: 1px solid #eee;">
				<!-- <view style="flex: 1;line-height: 42px;">姓名</view> -->
				<input style="flex: 1;" class="uni-input" value="地址" disabled="true" />
				<view style="flex: 5;">
					<input style="padding: 20px 10px 10px 0;color: gray" class="uni-input"
						v-model="address" placeholder="请输入现住地址" />
				</view>
			</view>

			<view class="uni-form-item uni-column" style="display: flex;border-bottom: 1px solid #eee;">
				<!-- <view style="flex: 1;line-height: 42px;">姓名</view> -->
				<input style="flex: 1;" class="uni-input" value="电话" disabled="true" />
				<view style="flex: 5; ">
					<input type="number" style="padding: 20px 10px 10px 0;color: gray" class="uni-input"
						v-model="mobile_number" placeholder="输入手机号码" />
				</view>
			</view>
			<view class="uni-form-item uni-column" style="display: flex;border-bottom: 1px solid #eee;">
				<!-- <view style="flex: 1;line-height: 42px;">姓名</view> -->
				<input style="flex: 1;" class="uni-input" value="技能" disabled="true" />
				<view style="flex: 5; ">
					<input style="width: 100%;padding: 20px 10px 10px 0;color: gray" class="uni-input"
						v-model="skill" placeholder="请填写有关家电维修的技术" />
				</view>
			</view>
			<view class="uni-form-item uni-column" style="display: flex;">
				<!-- <view style="flex: 1;line-height: 42px;">姓名</view> -->
				<!-- <input class="uni-input" value="身份证" disabled="true" /> -->
				<view style="flex: 5; margin-left: 100rpx; position: absolute;">
					<input type="number" style="padding: 20px 10px 10px 0;color: gray" class="uni-input"
						v-model="mobile_number" placeholder="请填写真实身份证号并上传身份证正反面" />
				</view>
			</view>
			
			<view class="uni-form-item uni-column" style="display: flex;border-bottom: 1px solid #eee;padding: 20px 10px;">
				<view style="flex: 1;margin-right: 10px;">
					<image @click="selectIdcardFront" :src="idcard_front" style="width: 100%;height: 100px;"></image>
				</view>
				<view style="flex: 1;">
					<image @click="selectIdcardBack" :src="idcard_back" style="width: 100%;height: 100px;"></image>
				</view>
			</view>
			<!-- 其余照片 -->
			<view class="" style="margin: 10px 0;">
				<view style="font-size: 14px;">其他 (可上传其他补充材料4张)</view>
			</view>
			
			<!-- <view class="uni-form-item uni-column" style="display: flex;border-bottom: 1px solid #eee;">
				<view style="flex: 1;"@click="selectIdcardFront">
					<image  :src="addtr_front" style="width: 190px;height: 120px;"></image>
				</view>
				<view style="flex: 1;">
					<image @click="selectIdcardBack" :src="addtr_front" style="width: 190px;height: 120px;"></image>
				</view>
			</view> -->
			
			<view style="margin-bottom: 20px;padding-bottom: 20px;border-bottom: 1px solid #eee;">
				<view class="block-content">
					<view v-for="(item, idx) in pics" class="character-avatar">
						<image :src="item"
							@click="pics = pics.filter((_image)=>_image !== item)" />
					</view>
					<view class="character-avatar">
						<image @click="selectPics()" src="../../static/ic_add_from_device.png" />
					</view>
					<!-- <view v-for="(item,idx) in materials" class="character-avatar">
						<image class="simage" v-for="(item1,index) in item.album" v-show="item.label == selected_label" :src="item1" @click="selectPic(item1)"/>
					</view> -->
				</view>
			</view>
			
			
			<!-- <view class="uni-form-item uni-column" style="display: flex;border-bottom: 1px solid #eee;">
				<view style="flex: 1;"@click="selectIdcardFront">
					<image  :src="addtr_front" style="width: 190px;height: 120px;"></image>
				</view>
				<view style="flex: 1;">
					<image @click="selectIdcardBack" :src="addtr_front" style="width: 190px;height: 120px;"></image>
				</view>
			</view> -->
		</view>
		<view style="font-size: 14px; margin-left: 10px; margin-top: 30px;">请确保填写信息为本人真实信息</view>
		<view style="padding: 10px;">
			<button
				size="default"
				style="width: 100%;background-color: red; color: #FFFFFF; border-radius: 10px;"
				@click="bindbud()">
				确定提交
			</button>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				realname: '',
				address: '',
				mobile_number: '',
				skill: '',
				idcard_front: '../../static/just.png',
				idcard_back: '../../static/against.png',
				pics: [],
			}
		},
		onLoad() {

		},
		methods: {
			bindbud() {
				let that = this;
				this.$api.postWorkerApply({
					uid: uni.getStorageSync('uid'),
					realname: this.realname,
					address: this.address,
					mobile_number: this.mobile_number,
					skill: this.skill,
				}).then(res => {
					if (res.meta.code == '000') {
						
						that.$api.postFiles(that.idcard_front, res.data.id, res.data.entity_class, 'idcard_front');
						that.$api.postFiles(that.idcard_back, res.data.id, res.data.entity_class, 'idcard_back');
						
						that.pics.forEach(function(item, i) {
							that.$api.postFiles(item, res.data.id, res.data.entity_class, 'album');
						})
						
						uni.showModal({
							title:'尊敬的用户，您的入驻申请资料',
							content:'提交成功，请耐心等待审核！',
							success(res) {
								if(res.confirm){
									
									uni.redirectTo({
									    url: '/pages/password/index'
									})
								}else if(res.cancel){
									console.log('用户取消')
								}
							}
						})
					}
				})
			},
			selectIdcardFront() {
				let that = this;
				uni.chooseImage({
				    success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						that.idcard_front = tempFilePaths[0];
						// console.log(chooseImageRes)
				    }
				});
			},
			selectIdcardBack() {
				let that = this;
				uni.chooseImage({
				    success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						that.idcard_back = tempFilePaths[0];
						// console.log(chooseImageRes)
				    }
				});
			},
			selectPics() {
				let that = this;
				uni.chooseImage({
				    success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						that.pics.push(tempFilePaths[0]);
						// console.log(chooseImageRes)
				    }
				});
			},
		}
	}
</script>

<style lang="less">
	.uni-input {
		font-size: 14px;
		padding: 20px 0 10px 0;
	}

	.subname {
		margin-left: 10px;
		font-size: 15px;
		white-space: nowrap
	}

	.subfind {
		padding: 20px 10px 10px 0;
		border-bottom: 1px solid #F1F1F1;

	}

	.subexplain {
		padding-left: 30px;
		text-align: right;

	}

	.subadd {
		font-size: 10px;
		color: #808080;
		padding-left: 15px;
	}

	.subdetails {
		text-align: center;
		font-size: 10px;
		color: #555555;
	}

	.subservice {
		text-align: center;
		font-size: 10px;
		color: #808080;
		margin: 55px 0;
		text-decoration: underline;
	}
	
	.block-content {
		display: flex;
		&>.character-avatar {
			margin-left: 0;
			margin-right: 5px;
	
			&>image {
				width: 75px;
				height: 75px;
				border-radius: 10px;
				margin-right: 2px;
			}
		}
	}
</style>
